feat(astro,vue,nuxt): Introduce APIKeys component #7225

wobsoriano · 2025-11-15T00:39:17Z

Description

This PR creates the Astro, Vue and Nuxt versions of the React <APIKeys /> AIO component

Checklist

pnpm test runs as expected.
pnpm build runs as expected.
(If applicable) JSDoc comments have been added or updated for any package exports
(If applicable) Documentation has been updated

Type of change

Summary by CodeRabbit

New Features
- Added APIKeys UI component for managing API keys across applications
- Available for integration with Astro, Vue, and Nuxt frameworks
- Component supports dynamic prop updates and lifecycle management

changeset-bot · 2025-11-15T00:39:20Z

🦋 Changeset detected

Latest commit: 919cc6a

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 3 packages

Name	Type
@clerk/astro	Minor
@clerk/nuxt	Minor
@clerk/vue	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

vercel · 2025-11-15T00:39:22Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
clerk-js-sandbox	Ready	Preview	Comment	Nov 15, 2025 10:20pm

coderabbitai · 2025-11-15T00:39:22Z

Walkthrough

This pull request introduces a new APIKeys UI component across the Clerk ecosystem. The component is implemented in Vue and re-exported through Astro and Nuxt packages with corresponding type registrations and mount configurations integrated into each framework's component system.

Changes

Cohort / File(s)	Summary
Changeset `.changeset/gentle-hats-hope.md`	Documents version bumps for `@clerk/astro`, `@clerk/nuxt`, and `@clerk/vue` packages and announces the new APIKeys component.
Astro Components `packages/astro/src/astro-components/index.ts`, `packages/astro/src/astro-components/interactive/APIKeys.astro`	Adds new APIKeys Astro component and exports it from the index. The component wraps InternalUIComponentRenderer with the 'api-keys' component type.
Astro Integration `packages/astro/src/internal/mount-clerk-astro-js-components.ts`, `packages/astro/src/types.ts`	Registers 'api-keys' mount function mapping and extends InternalUIComponentId type union to include 'api-keys'.
Nuxt Integration `packages/nuxt/src/module.ts`, `packages/nuxt/src/runtime/components/index.ts`	Adds APIKeys to Nuxt module's auto-registered components and exports it from the runtime components index.
Vue Component `packages/vue/src/components/index.ts`, `packages/vue/src/components/ui-components/APIKeys.vue`	Introduces new Vue SFC for APIKeys using setup script syntax with ClerkHostRenderer for mount/unmount/updateProps lifecycle management.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Verify that the APIKeys Vue component correctly implements the ClerkHostRenderer lifecycle handlers and prop forwarding
Confirm that all type definitions and mount mappings across Astro align properly
Check that the Nuxt module exports and runtime components are correctly connected
Validate version bump consistency across the three packages

Poem

🗝️ A brand new component hops into view,
APIKeys now available for me and for you,
Across Vue, Astro, and Nuxt it flows,
Type-safe and mounted wherever it goes,
With renderers singing and props on their way! 🐰✨

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and concisely describes the main change: introducing a new APIKeys component across three frameworks (Astro, Vue, Nuxt).
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

✨ Finishing touches

📝 Generate docstrings

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment
Commit unit tests in branch rob/api-keys-vue-astro

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

pkg-pr-new · 2025-11-15T22:21:58Z

Open in StackBlitz

@clerk/agent-toolkit

npm i https://pkg.pr.new/@clerk/agent-toolkit@7225

@clerk/astro

npm i https://pkg.pr.new/@clerk/astro@7225

@clerk/backend

npm i https://pkg.pr.new/@clerk/backend@7225

@clerk/chrome-extension

npm i https://pkg.pr.new/@clerk/chrome-extension@7225

@clerk/clerk-js

npm i https://pkg.pr.new/@clerk/clerk-js@7225

@clerk/dev-cli

npm i https://pkg.pr.new/@clerk/dev-cli@7225

@clerk/elements

npm i https://pkg.pr.new/@clerk/elements@7225

@clerk/clerk-expo

npm i https://pkg.pr.new/@clerk/clerk-expo@7225

@clerk/expo-passkeys

npm i https://pkg.pr.new/@clerk/expo-passkeys@7225

@clerk/express

npm i https://pkg.pr.new/@clerk/express@7225

@clerk/fastify

npm i https://pkg.pr.new/@clerk/fastify@7225

@clerk/localizations

npm i https://pkg.pr.new/@clerk/localizations@7225

@clerk/nextjs

npm i https://pkg.pr.new/@clerk/nextjs@7225

@clerk/nuxt

npm i https://pkg.pr.new/@clerk/nuxt@7225

@clerk/clerk-react

npm i https://pkg.pr.new/@clerk/clerk-react@7225

@clerk/react-router

npm i https://pkg.pr.new/@clerk/react-router@7225

@clerk/remix

npm i https://pkg.pr.new/@clerk/remix@7225

@clerk/shared

npm i https://pkg.pr.new/@clerk/shared@7225

@clerk/tanstack-react-start

npm i https://pkg.pr.new/@clerk/tanstack-react-start@7225

@clerk/testing

npm i https://pkg.pr.new/@clerk/testing@7225

@clerk/themes

npm i https://pkg.pr.new/@clerk/themes@7225

@clerk/types

npm i https://pkg.pr.new/@clerk/types@7225

@clerk/upgrade

npm i https://pkg.pr.new/@clerk/upgrade@7225

@clerk/vue

npm i https://pkg.pr.new/@clerk/vue@7225

commit: 919cc6a

coderabbitai

Actionable comments posted: 0

🧹 Nitpick comments (1)

packages/vue/src/components/index.ts (1)

1-13: Consider alphabetical ordering for component exports.

The component exports don't follow a strict alphabetical order. While the current approach works, alphabetically ordering these exports (lines 1-8, 12-13) would improve maintainability and make it easier to locate components.

If alphabetical, APIKeys would appear at or near the top of the list.

📜 Review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Disabled knowledge base sources:

Linear integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between bdbb0d9 and 919cc6a.

📒 Files selected for processing (9)

.changeset/gentle-hats-hope.md (1 hunks)
packages/astro/src/astro-components/index.ts (1 hunks)
packages/astro/src/astro-components/interactive/APIKeys.astro (1 hunks)
packages/astro/src/internal/mount-clerk-astro-js-components.ts (1 hunks)
packages/astro/src/types.ts (1 hunks)
packages/nuxt/src/module.ts (1 hunks)
packages/nuxt/src/runtime/components/index.ts (1 hunks)
packages/vue/src/components/index.ts (1 hunks)
packages/vue/src/components/ui-components/APIKeys.vue (1 hunks)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (27)

GitHub Check: Integration Tests (quickstart, chrome, 15)
GitHub Check: Integration Tests (nextjs, chrome, 15)
GitHub Check: Integration Tests (nextjs, chrome, 16)
GitHub Check: Integration Tests (quickstart, chrome, 16)
GitHub Check: Integration Tests (nextjs, chrome, 15, RQ)
GitHub Check: Integration Tests (nextjs, chrome, 14)
GitHub Check: Integration Tests (tanstack-react-start, chrome)
GitHub Check: Integration Tests (billing, chrome, RQ)
GitHub Check: Integration Tests (handshake:staging, chrome)
GitHub Check: Integration Tests (custom, chrome)
GitHub Check: Integration Tests (react-router, chrome)
GitHub Check: Integration Tests (nuxt, chrome)
GitHub Check: Integration Tests (billing, chrome)
GitHub Check: Integration Tests (machine, chrome)
GitHub Check: Integration Tests (astro, chrome)
GitHub Check: Integration Tests (handshake, chrome)
GitHub Check: Integration Tests (expo-web, chrome)
GitHub Check: Integration Tests (vue, chrome)
GitHub Check: Integration Tests (sessions:staging, chrome)
GitHub Check: Integration Tests (elements, chrome)
GitHub Check: Integration Tests (sessions, chrome)
GitHub Check: Integration Tests (localhost, chrome)
GitHub Check: Integration Tests (express, chrome)
GitHub Check: Integration Tests (ap-flows, chrome)
GitHub Check: Integration Tests (generic, chrome)
GitHub Check: Publish with pkg-pr-new
GitHub Check: semgrep-cloud-platform/scan

🔇 Additional comments (9)

.changeset/gentle-hats-hope.md (1)

1-7: LGTM! Changeset properly documents the new feature.

The changeset correctly identifies all affected packages with appropriate minor version bumps for the new APIKeys component.

packages/astro/src/astro-components/index.ts (1)

34-34: LGTM! Export follows the established pattern.

The APIKeys export is properly placed in the UI Components section and follows the same pattern as other component exports.

packages/nuxt/src/module.ts (1)

172-173: LGTM! Component registration follows the established pattern.

The APIKeys component is properly added to the auto-registration array with an appropriate section comment. The type constraint ensures the component is actually exported from @clerk/vue.

packages/astro/src/types.ts (1)

75-76: LGTM! Type extension is correct and consistent.

The addition of 'api-keys' to the InternalUIComponentId union type is necessary for type safety and matches the component ID used throughout the integration.

packages/vue/src/components/ui-components/APIKeys.vue (1)

1-17: LGTM! Component follows the established ClerkHostRenderer pattern.

The Vue component correctly:

Uses the ClerkHostRenderer wrapper component

Binds the appropriate mount/unmount methods

Passes through props with proper typing

The type cast to any on line 14 is acceptable given that __unstable__updateProps is marked as an unstable API and likely not part of the public type definitions.

packages/nuxt/src/runtime/components/index.ts (1)

33-33: Export addition verified — no issues found.

The verification confirms that APIKeys is properly exported from @clerk/vue on line 8 of packages/vue/src/components/index.ts. The export pattern is consistent and correct.

packages/astro/src/astro-components/interactive/APIKeys.astro (1)

1-11: LGTM! Component implementation follows the established pattern.

The Astro component wrapper is correctly structured:

Properly imports and types the props from @clerk/shared/types

Uses InternalUIComponentRenderer with the correct component ID

Spreads props as expected

packages/astro/src/internal/mount-clerk-astro-js-components.ts (1)

23-23: LGTM! Pattern is consistent with existing mount mappings.

The mountAPIKeys method is confirmed to exist on the Clerk type in packages/shared/src/types/clerk.ts:586 with the correct signature mountAPIKeys: (targetNode: HTMLDivElement, props?: APIKeysProps) => void;. The addition follows the established pattern, and the satisfies constraint ensures type safety. No issues found.

packages/vue/src/components/index.ts (1)

8-8: APIKeys export is correctly implemented across all frameworks.

Verification confirms:

✓ ./ui-components/APIKeys.vue exists and is properly implemented using Vue 3 composition API

✓ Component is exported in the Vue package (line 8)

✓ Component is integrated into Astro (packages/astro/src/astro-components/index.ts:34)

✓ Component is integrated into Nuxt (packages/nuxt/src/runtime/components/index.ts:33)

No issues found.

clerk-cookie added clerk-js react astro nuxt vue labels Nov 15, 2025

wobsoriano changed the base branch from main to rob/standardize-api-keys-naming November 15, 2025 01:21

vercel bot deployed to Preview November 15, 2025 01:22 View deployment

wobsoriano force-pushed the rob/api-keys-vue-astro branch from cc9caf2 to c27f090 Compare November 15, 2025 01:24

clerk-cookie removed clerk-js react labels Nov 15, 2025

Base automatically changed from rob/standardize-api-keys-naming to main November 15, 2025 21:12

feat: Introduce APIKeys component to Vue, Astro and Nuxt

dfba175

wobsoriano force-pushed the rob/api-keys-vue-astro branch from c27f090 to dfba175 Compare November 15, 2025 22:17

vercel bot temporarily deployed to Preview November 15, 2025 22:17 Inactive

wobsoriano marked this pull request as ready for review November 15, 2025 22:18

chore: add changeset

919cc6a

vercel bot deployed to Preview November 15, 2025 22:20 View deployment

coderabbitai bot reviewed Nov 15, 2025

View reviewed changes

octoper approved these changes Nov 17, 2025

View reviewed changes

wobsoriano merged commit 6d3c66d into main Nov 17, 2025
47 checks passed

wobsoriano deleted the rob/api-keys-vue-astro branch November 17, 2025 11:45

clerk-cookie mentioned this pull request Nov 15, 2025

ci(repo): Version packages #7210

Merged

coderabbitai bot mentioned this pull request Nov 21, 2025

chore(nuxt): Change default routing strategy to path-based #7260

Merged

9 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat(astro,vue,nuxt): Introduce APIKeys component #7225

feat(astro,vue,nuxt): Introduce APIKeys component #7225

Uh oh!

wobsoriano commented Nov 15, 2025 •

edited

Loading

Uh oh!

changeset-bot bot commented Nov 15, 2025 •

edited

Loading

Uh oh!

vercel bot commented Nov 15, 2025 •

edited

Loading

Uh oh!

coderabbitai bot commented Nov 15, 2025 •

edited

Loading

Uh oh!

pkg-pr-new bot commented Nov 15, 2025

Uh oh!

coderabbitai bot left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

feat(astro,vue,nuxt): Introduce APIKeys component #7225

feat(astro,vue,nuxt): Introduce APIKeys component #7225

Uh oh!

Conversation

wobsoriano commented Nov 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Checklist

Type of change

Summary by CodeRabbit

Uh oh!

changeset-bot bot commented Nov 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

vercel bot commented Nov 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai bot commented Nov 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Poem

Pre-merge checks and finishing touches

Uh oh!

pkg-pr-new bot commented Nov 15, 2025

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

wobsoriano commented Nov 15, 2025 •

edited

Loading

changeset-bot bot commented Nov 15, 2025 •

edited

Loading

vercel bot commented Nov 15, 2025 •

edited

Loading

coderabbitai bot commented Nov 15, 2025 •

edited

Loading